<template>
	<view class="bar-box">
		<view class="search-box">
			<view class="icon iconfont icon-sousuo"></view>
			<input class="search-input" v-model="keywords" @confirm="confirmSearch" :placeholder="placeholder" />
			<view v-if="keywords" @click="delKeyWords" class="del-icon iconfont icon-shanchu">
				
			</view>
		</view>
		<view v-if="showUtils" :class="{'search-utils':true,active: hasVal}" @click="sliderFun">
			<view class="label">筛选</view>
			<view v-if="barAct" class="icon iconfont icon-arrowupl"></view>
			<view v-else class="icon iconfont icon-xiangxiajiantou"></view>
		</view>
	</view>
	<view :class="{'search-content-bg':true,'active': barAct}" @click="hideBar"></view>
	<view :class="{'search-content':true,'active': barAct}">
		<view class="search-content-content">
			<slot></slot>
		</view>
		<view class="search-content-bottom">
			<view class="reset-btn btn" @click="reset">重置</view>
			<view class="confirm-btn btn" @click="confirm">确认</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,watch } from "vue"
	
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
			  return {}
			}
		},
		searchFun: {
			type: Function,
			default: () => {}
		},
		resetSearchFun: {
			type: Function,
			default: () => {}
		},
		confirmSearchFun: {
			type: Function,
			default: () => {}
		},
		placeholder: {
			type: String,
			default: '请输入内容'
		},
		showUtils: {
			type: Boolean,
			default: true
		},
	})
	
	const keywords = ref('')
	
	const barAct = ref(false)
	
	const sliderFun = () => {
		barAct.value = !barAct.value 
	}
	
	const confirmSearch = () => {
		props.searchFun(keywords.value)
	}
	
	const reset = () => {
		props.resetSearchFun()
	}
	
	const confirm = () => {
		props.confirmSearchFun()
		barAct.value = false;
	}
	
	const delKeyWords = () => {
		keywords.value = ""
		props.searchFun(keywords.value)
	}
	
	const hideBar = () => {
		barAct.value = !barAct.value 
	}
	
	const hasVal = ref(false)
	watch(()=>props.data,(newV)=>{
		hasVal.value = false;
		Object.keys(newV).forEach((v,i)=>{
			if(newV[v]){
				hasVal.value = true;
			}
		})
	},{deep:true})
</script>

<style lang="scss">
	.bar-box{
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 999999;
		@include flex(row,space-between,center);
		
		.search-box{
			width: 522rpx;
			height: 68rpx;
			background: #F3F5F8;
			border-radius: 100rpx;
			@include flex-start();
			padding: 24rpx;
			box-sizing: border-box;
			flex: 1;
			
			.icon{
				font-size: 32rpx;
				margin-right: 10rpx;
			}
			
			.search-input{
				flex: 1;
				height: 68rpx;
			}
			
			.del-icon{
				color: #bdbdbd;
				font-size: 40rpx;
				padding: 5rpx;
			}
		}
		
		.search-utils{
			margin-left: 30rpx;
			@include flex-start();
			.label{
				color: #576987;
				font-size: 30rpx;
			}
			
			.icon{
				color: #576987;
				font-size: 36rpx;
			}
		}
		
		.search-utils.active{
			.label{
				color: var(--mainColor);
			}
			.icon{
				color: var(--mainColor);
			}
		}
	
	}
	
	.search-item{
		margin-bottom: 30rpx;
	}
	
	.search-content-bg{
		position: fixed;
		left: 0;
		top: -2000rpx;
		bottom: 2000rpx;
		right: 0;
		background-color: rgba(0,0,0,.7);
		z-index: 99998;
		transition: all 0.6s;
	}
	
	.search-content-bg.active{
		top: 148rpx;
		bottom: 0;
	}
	
	.search-content.active{
		top: 148rpx;
		bottom: 300rpx;
	}
	
	.search-content{
		position: fixed;
		left: 0;
		top: -2000rpx;
		right: 0;
		bottom: 2000rpx;
		background-color: #fff;
		z-index: 99999;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
		overflow: hidden;
		transition: all 0.6s;
		@include flex(column,center,center);
		
		.search-content-content{
			flex: 1;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			overflow-y: auto;
			
			
		}
						
		.search-content-bottom{
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			height: 121rpx;
			background: #FFFFFF;
			border-top: 1px solid #f1f1f1;
			@include flex(row,space-between,center);
			
			.reset-btn{
				width: 212rpx;
				height: 88rpx;
				background: #F8F8F8;
				border-radius: 100rpx;
				font-size: 32rpx;
				color: #16294B;
				@include flex-center();
			}
			
			.confirm-btn{
				width: 432rpx;
				height: 88rpx;
				background: #124EFF;
				border-radius: 100rpx;
				font-size: 32rpx;
				color: #fff;
				@include flex-center();
			}
		}
	
	}
	
	
</style>